import React,{Component} from 'react';
import './css/login.css'
import { Form, Input, Button,message } from 'antd';
import {connect} from 'react-redux'
import { UserOutlined,UnlockFilled } from '@ant-design/icons';
import 'antd/dist/antd.css';
import {reqLogin} from '../../api/index.js'
import {saveUserAndToken} from '../../redux/actions/login'
 class Login extends Component {
	    handleFinish = async (values) => {
			// event.preventDefult();//组织默认时间--禁止form表单提交--通过阿Java发送请求
			const {username, password} = values;
			let result= await reqLogin(username, password)
			const {status, msg, data} = result;
			if (status === 0) {
			   
			    const {user, token} = data;
				 
				   //1.服务器返回的user信息和token信交由redux管理
			    this.props.saveUserAndToken({user, token});
				//提示登录成功
				message.info("登录成功", 2);
				//2.跳转到admin页面
				this.props.history.replace("/admin/home");
			   
			  
			  
			} else {
			    message.warn(msg, 2);
			}
			  
	      }

	render(){
		return (
		 <div className="login">
          <div className="login-center">
            <h2 className="title">商品后台管理系统</h2>
             <Form
			     className="login-form"
                  name="basic"
                  wrapperCol={{ span: 24 }}
                  initialValues={{ remember: true }}
                  autoComplete="off"
				  onFinish={this.handleFinish}
                >
                  <Form.Item
                    name="username"
                    rules={[{ required: true, message: '用户名不能为空!' },
					 {min: 4, message: '用户名必须大于4位'},
					 {max: 12, message: '用户名必须小于12位'},
					 {pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成'}]} 
					 initialValue={"admin"} 
					 
                  >
                    <Input size="large" prefix={<UserOutlined style={{color:'#c0c4cc'}}/>} placeholder="用户名"/>
                  </Form.Item>
            
                  <Form.Item
                    name="password"
                    rules={[
                     {
                           validator: async (rule, value) => {
                               if (!value) {
                                   throw new Error('请输入密码!');
                               }
                               if (value.length < 4) {
                                   throw new Error('密码必须大于4位');
                               }
                               if (value.length > 12) {
                                   throw new Error('用户名必须小于12位');
                               }
                               if (!(/^[a-zA-Z0-9_]+$/.test(value))) {
                                   throw new Error('密码必须是英文、数组或下划线组成');
                               }
                           }
                         }
                     ]}
                   	initialValue={"admin"} 
                  >
                    <Input.Password size="large" prefix={<UnlockFilled style={{color:'#c0c4cc'}}/>} placeholder="密码"/>
                  </Form.Item>
            
                
            
                  <Form.Item>
                    <Button type="primary"  htmlType="submit" className="login-button" size="large">
                      登陆
                    </Button>
                  </Form.Item>
                </Form>
          </div>

		 </div>
		)
	}
}
export default connect(
    state => ({isLogin: state.login.isLogin}),
    {
        saveUserAndToken
    }
)(Login)